<!DOCTYPE html>
<html lang="en">

    <!-- //开发者工具快捷键 F12 -->

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="tools.js"></script>
    </head>

    <body>
        <!-- html和js一样，字符串都可以用单引号或者是双引号来进行表示 -->
        <!-- 但是如果是嵌套使用的话，要注意可能形成截断，单引号中包含的应该是双引号
            双引号中包含的应该是单引号 -->
        <!-- 在Java中，单引号表示的是字符，双引号表示的是字符串 -->
        <!-- 控制台是可以直接打印js代码或者执行js代码的（可以在控制台写代码并且执行） -->
        <!-- 源代码：可以进行调试js代码 -->
        <!-- 网络：可以进行抓包， 查看所有的网络请求 -->
        <!-- 比如请求一次百度的页面，请求发送的数据并不是只是发送一个url，是要发送很多的数据包的，
                 ，然后网络就可以看清请求的都有什么数据，然后响应的都有什么数据，在进行前后端代码交互的时候
                是避免不了有很多的bug的，此时在排查到底是哪里的错误的时候，就需要看到底是前端的参数传错了，
                还是后端的代码写错了，所以网络很重要 -->
        <!-- 应用程序：里面保存了网站的一些相关信息，后端保存数据是靠数据库，前端就是靠应用程序
            中的本地储存之类的东西 -->
        <!-- 浏览器调试的重要组件：元素，控制台，源代码，网络 -->

        <!-- 1.js的行内式写法 -->
        <input id="btn1" type="button" value=" 点我一下 " onclick="alert('张三');">

        <!-- 2.js的内嵌式写法 -->
        <!-- 内嵌式写法写js一定是写在HTML之后的，等页面渲染完成之后，才能进行js操作这个页面
        否则页面还没有渲染完成，就去操作这个页面，此时代码就会报错 -->

        <!-- 如果这个代码写在了最上边，此时就会报错，因为还没有初始化这个value -->
        <script>
            // alert(document.getElementById("btn1").value);
            // var name = prompt("请输入你的名字？");
            // console.debug("用户输入了 ->" + name);
            // console.log("用户输入录了 ->" + name);

            // var name = "张三";
            // alert(name);
            // let name2 = "李四";
            // alert(name2);
            //var和let的区别是：var诞生的早，let诞生的晚，var用于定义全局变量，let用于定义局部变量
            //更建议使用var，它的通用性更好

            // var name = prompt("请输入姓名：");
            // var age = prompt("请输入年龄：");
            // var sex = prompt("请输入性别：");
            // alert("姓名：" + name + "\n年龄：" + age + "\n性别：" + sex);

            // var num = "5";
            // var num2 = "5";
            // alert(num + num2);
            //js中的数据类型是动态类型，只有一个var可以表示所有的类型，
            //但是其实也是有类型的，如上述代码就是进行字符串的拼接，而不会识别成是两个整数
            //如果是两个整数进行相加就是正常的整数，一个整数+字符串结果是字符串
            //只有执行到等号之后才能确定这个变量是什么类型

            // var num = 5;
            // var num2 = "abc";
            // alert(num2 - num);
            //此时在显示框中显示的结果是NaN（not a number）
            //加号的规则：1.数字相加，2.字符串的拼接，如果一个数字和一个字符串，就提升为字符串的拼接

            // var var1;
            // console.log(var1);//undefined
            // console.log(var1 + " 你好 ");//undefined 你好
            // console.log(var1 + 10);//NaN

            // var var2 = null;
            // console.log(var2);//null
            // console.log(var2 + " 你好 ");//null 你好
            // console.log(var2 + 10);//10

            var num = 10;
            var num2 = "10";
            console.log("==隐式类型结果：" + (num == num2));//true
            console.log("===严格类型比较结果：" + (num === num2));//false
            // 进行隐式类型的转换会把字符串变成一个整数来进行比较
            //===就不会进行隐式类型的转换，和Java中的语法是一样的

            if (num == num2) {
                console.log("相等");
            } else {
                console.log("不相等");
            }
            //if语句和Java中的语法也是一样的

            var num = prompt("判断奇偶数，请输入：");
            console.log(num + 10);
            if (num % 2 == 0) {
                alert(num + " -> 结果是偶数");
            } else {
                alert(num + "-> 结果为奇数");
            }
        </script>

        <!-- 3.外部写法 -->
        <!-- 外部写法和内嵌式写法的使用场景是不同的，外部的一般是工具类，此时不会
        针对某一个HTML标签进行索要数据之类的，一般都是需求是在执行HTML之前外部的
        js文件就已经是加载好了的，所以外部写法写在head中是最合适的 -->

    </body>

    <!-- 总结：如果有一个工具要去使用，此时就使用外部写法
               如果是针对当前文件的，就是用内嵌式写法 -->

</html>